<template>
    <el-container class="container">
      <el-aside width="15%" class="aside">
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        router
      >
        <el-sub-menu index="1">
          <template #title>
            <span>排序方式</span>
          </template>       
            <el-menu-item index="/layout/sorting/bubble">冒泡排序</el-menu-item>
            <el-menu-item index="/layout/sorting/insert">插入排序</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="exam" >
          <span>学习成果检验</span>
        </el-menu-item>
      </el-menu>
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
</template>

<script setup>
import router from "@/router";
</script>

<style scoped>
*{
  * {
  margin: 0;
  padding: 0;
}
}
.el-menu-vertical-demo{
    height: 100%;
}
.container{
    position: fixed;
    width: 100%;
    height: 100%;
}
.aside{
    background-color: #66ccff;
}
</style>